<script setup lang="ts">
// TODO:待优化
import { message, Spin } from 'ant-design-vue';
import {useAIChatSse} from '@/common/composables/useChatFetchSse'
import {Viewer} from '@bytemd/vue-next'
type MessageType = 'human' | 'system'
const messageValue = ref('')
const messagePlaceholder = ref('')
const messageList = ref([
  {
    id: useId(),
    type: "system",
    message: "Hi!你好我是一个爱学习的ai,你可以问我学习的问题"
  }
])
const messageListRef = ref<HTMLDivElement>()
const [messageApi, contextHolder] = message.useMessage()


const addMessage = (type: MessageType, message: string) => {
  return {
    // BUG:有BUG以后再看   [Vue warn]: useId() is called when there is no active component instance to be associated with.
    id: useId(),
    type: type,
    message
  }
}

const { isLoading, fetchChatData, value } = useAIChatSse()

/**
 * 发送信息
 */
const onSendMessage = async () => {
  if (messageValue.value.length === 0) return messageApi.error("请输入您要发送的消息")
  messageList.value.push(addMessage('human', messageValue.value))
  await fetchChatData(messageValue.value)

  messageList.value.push(addMessage('system', messagePlaceholder.value))

  // sendChatAI(messageValue.value)
  messageValue.value = ''
}

watch(value, value => {
  console.log("value:", value);
  messagePlaceholder.value += value
})


</script>

<template>
  <div class="chat">
    <context-holder />
    <div class="message">
      <ul class="message-list scroll-bar" ref="messageListRef" v-auto-scroll:bottom>
        <li class="message-item" v-for="item in messageList" :key="item.id" :class="`message-item--${item.type}`">
          <Viewer :value="item.message" />

        </li>
        <li class="message-item message-item--system" :class="{
          'hidden': !isLoading
        }">
          <Viewer :value="messagePlaceholder" />
          <Spin />
        </li>
      </ul>
    </div>
    <div class="message-footer">
      <a-input-group compact class="flex" size="large">
        <a-input v-model:value="messageValue" class="flex-1" @press-enter="onSendMessage" />
        <a-button type="primary" @click="onSendMessage" :disabled="isLoading">发送</a-button>
      </a-input-group>
    </div>

  </div>
</template>

<style scoped lang="scss">
.chat {
  display: flex;
  flex-direction: column;
  height: 100%;

  .message {
    flex: 1;
    overflow: hidden;

    &-list {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: $educ-margin-base;
      height: 100%;
      max-height: 100%;
      padding-right: 4px;
      padding-bottom: $educ-margin-base;
      overflow-y: scroll;


    }

    &-item {
      padding-block: 4px;
      padding-inline: $educ-margin-base ;
      font-size: $educ-font-size-base;
      border-radius: $educ-border-sm;

      &--human {
        align-self: flex-end;
        color: $educ-color-white;
        background-color: $educ-color-primary;
      }

      &--system {
        align-self: flex-start;
        color: $educ-color-black;
        background-color: $educ-color-grey;
      }
    }
  }

  &-footer {
    padding: 6px;

    /* background-color: $educ-color-primary; */
  }
}
</style>